<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useUserStore } from '@/stores/user';
import { useUserProfileStore } from '@/stores/userProfile';
import { validatePhoneNumber } from '@/utils/validate';

// 表单数据
const form = reactive({
  phoneNumber: '',
  verCode: '',
  newPhoneNumber:''
});

// 验证规则
const rules = {
  phoneNumber: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    // 可以添加更多手机号格式验证规则
  ],
  verCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ],
  newPhoneNumber:[
  { required: true, message: '请输入新的手机号', trigger: 'blur' },
  ]
};

// 对话框显示控制
const userProfileStore = useUserProfileStore()


// 倒计时
const countDown = ref(0);
const timer = ref();


// 提交表单方法
const submitForm = () => {
  if(!validatePhoneNumber(form.phoneNumber)){
    ElMessage.error("手机号码格式无效");
    return
  }
  if(form.phoneNumber !== userProfileStore.userInfor.phoneNumber){
    ElMessage.error("手机号不匹配")
    return
  }


  if(form.verCode !== '1234'){
    ElMessage.error("验证码错误")
    return
  }
  if(!validatePhoneNumber(form.newPhoneNumber)){
    ElMessage.error("新的手机号码格式无效");
    return
  }

  userProfileStore.userInfor.phoneNumber = form.newPhoneNumber

  ElMessage.success('提交成功');
  userProfileStore.isPhone = false;
};

// 关闭对话框前的钩子
const handleClose = (done: () => void) => {
  if (timer.value) clearInterval(timer.value);
  done();
};

const userStore = useUserStore()

</script>


<template>
  <div>
    <!-- 对话框 -->
    <el-dialog
      v-model="userProfileStore.isPhone"
      title="更换手机"
      width="30%"
      :before-close="handleClose">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px"   class="centered-form">
        <el-col :gutter="20" class="form-col">
          <el-col :span="18">
            <el-form-item label="手机号" prop="phoneNumber">
              <el-input v-model="form.phoneNumber" placeholder="请输入当前手机号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="验证码" prop="verCode">
              <el-input v-model="form.verCode" placeholder="请输入验证码">
                <template #append>
                  <el-button @click="userStore.startCountdown(form.phoneNumber,'phone')" :disabled="countDown > 0">
                    {{ userStore.buttonText }}
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="18">
            <el-form-item label="新手机号" prop="newPhoneNumber">
              <el-input v-model="form.newPhoneNumber" placeholder="请输入新的手机号"></el-input>
            </el-form-item>
          </el-col>

        </el-col>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="userProfileStore.isPhone = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>



<style scoped>

:deep(.el-dialog) {
  background-color: rgb(47, 59, 82);
}
:deep(.el-dialog__title){
    color:white;
    margin-left: 50px;
  }
.form-col{
  margin-left: 20%;
}

</style>
